<script setup>
import { ref,onUnmounted } from 'vue'
import useTable from "@/utils/useTable";
import { http } from "@/api";
import {useRouter} from "vue-router";
import {dayjs, ElLoading, ElMessage, ElMessageBox} from "element-plus";
const router = useRouter()
/**
 * 搜索
 */

const dateRange = ref([])
const changeDate = (val) => {
  if (!val) {
    searchParams.value.startTime = ''
    searchParams.value.endTime = ''
    return
  }
  searchParams.value.startTime = val[0] || ''
  searchParams.value.endTime = val[1] || ''
}
/**
 * 表格
 * @type {Ref<UnwrapRef<*[]>>}
 */
const {
  searchParams,
  pageNo,
  pageSize,
  total,
  changePage,
  changeSize,
  dataSource,
  search,
  reset,
  openAdd,
} = useTable({
  requestFn: http.Server,
  routerPre: 'Server',
  params: {
    "endTime": "",
    "startTime": "",
    "nick": ""
  },
})
const openDelete = (row) => {
  ElMessageBox.confirm(
      '是否结束沟通？',
      '提示',
      {
        confirmButtonText: '确认结束',
        cancelButtonText: '取消',
        type: 'error',
      }
  )
      .then(() => {
        const loadingInstance = ElLoading.service()
        http.Server.del({
          id: row.id
        }).then(res => {
          ElMessage({
            type: 'success',
            message: '结束成功',
          })
          search()
        }).finally(() => {
          loadingInstance.close()
        })
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '结束取消',
        })
      })
}

const openView2 = (row) => {
  router.push({
    path: `/Server/Detail/${row.id}`,
    query: {
      nick: row.nick,
      avatar: row.imageUrl,
      createTime: row.createTime ? dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss') : ''
    }
  })
}
const openEdit2 = (row) => {
  router.push({
    path: `/Server/Save/${row.id}`,
    query: {
      nick: row.nick,
      avatar: row.imageUrl,
      createTime: row.createTime ? dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss') : ''
    }
  })
}


// // 定时轮询 getMessage 退出时关闭定时任务
// const timer = setInterval(() => {
//   search()
// }, 1000 * 10)
// onUnmounted(() => {
//   search(timer)
// })
</script>


<template>
  <PageMain title="人工客服">
    <el-form label-suffix="：" inline>
      <el-form-item label="用户昵称">
        <el-input clearable v-model="searchParams.nick"></el-input>
      </el-form-item>
      <el-form-item label="沟通状态">
        <el-select v-model="searchParams.status" clearable>
          <el-option label="未开始" value="0"></el-option>
          <el-option label="沟通中" value="1"></el-option>
          <el-option label="已结束" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="沟通时间">
        <el-date-picker clearable
            @change="changeDate"
            v-model="dateRange"
            type="daterange"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
        />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
        <el-button @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="table-box server-table">
      <el-table :data="dataSource">
        <el-table-column label="用户昵称" property="nick"></el-table-column>
        <el-table-column label="用户头像">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <ViewImage type="avatar" :image-url="scope.row.imageUrl"/>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="状态">
          <template #default="scope">
            <el-tag v-if="scope.row.status == 1" type="success">沟通中</el-tag>
            <el-tag v-if="scope.row.status == 2" type="danger">已结束</el-tag>
            <el-tag v-if="scope.row.status == 0" type="info">未沟通</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="沟通时间" prop="createTime"></el-table-column>
        <el-table-column label="操作" fixed="right" width="220px">
          <template #default="scope">
            <el-button type="text" v-if="scope.row.status == 2" @click="openView2(scope.row)">查看</el-button>
            <el-badge value="新" class="item" v-if="scope.row.isInform === 1" style="margin-right: 12px;">
              <el-button type="text" v-if="scope.row.status != 2" @click="openEdit2(scope.row)"  style="color: #529b2e">回复</el-button>
            </el-badge>
            <el-button v-else type="text" v-if="scope.row.status != 2" @click="openEdit2(scope.row)">回复</el-button>
            <el-button type="text" v-if="scope.row.status == 1" @click="openDelete(scope.row)" style="color: #f56c6c">结束沟通</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </PageMain>
</template>

<style  lang="scss">
.server-table {
  .cell {
    overflow: initial;
  }
}
</style>
